import SVGApp from '@mdi/svg/svg/apps.svg';
import { FoldableMenu } from '../imports';

export function FoldableMenuPage() {
	return (
		<div style={{ display: 'flex' }}>
			<FoldableMenu
				items={[
					{
						key: 'a',
						icon: SVGApp,
						label: '菜单1',
						expand: true,
						children: [
							{ key: 'a-1', label: '子菜单1' },
							{ label: '子菜单2' },
							{
								label: '子菜单3',
								children: [
									{ label: '子菜单1-1' },
									{ label: '子菜单1-2' },
									{ label: '子菜单1-3' },
									{ label: '子菜单1-4' },
								],
							},
							{ label: '子菜单4' },
							{ label: '子菜单5' },
						],
					},
					{
						key: 'b',
						icon: SVGApp,
						label: '菜单2',
						children: [{ label: '子菜单2-1' }, { label: '子菜单2-2' }, { label: '子菜单2-3' }, { label: '子菜单2-4' }],
					},
					{
						icon: SVGApp,
						label: '菜单2',
					},
				]}
				style={{
					width: '16em',
					// backgroundImage: `url(${BG})`,
				}}
				aniDuration={500}
				singleGroupMode
				onMenuItemClick={(item, path) => {
					console.log(path);
				}}
			/>
		</div>
	);
}
